<template>
  <div id="app4">
    <NavBar />
  <div class="battles-container">
    <!-- 顶部筛选和搜索 -->
    <div class="battles-header">
      <el-row :gutter="20" align="middle">
        <el-col :span="6">
          <h2>抗日战争重要战役</h2>
        </el-col>
        <el-col :span="12">
          <el-input
            v-model="searchQuery"
            placeholder="搜索战役..."
            prefix-icon="Search"
          >
            <template #append>
              <el-button-group>
                <el-button 
                  :type="viewMode === 'timeline' ? 'primary' : ''"
                  @click="viewMode = 'timeline'"
                >
                  <el-icon><Timer /></el-icon>
                </el-button>
                <el-button 
                  :type="viewMode === 'map' ? 'primary' : ''"
                  @click="viewMode = 'map'"
                >
                  <el-icon><Location /></el-icon>
                </el-button>
              </el-button-group>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="yearFilter" placeholder="年份筛选" clearable>
            <el-option
              v-for="year in years"
              :key="year"
              :label="year"
              :value="year"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="battles-content">
      <!-- 时间轴视图 -->
      <div v-if="viewMode === 'timeline'" class="timeline-view">
        <el-timeline>
          <el-timeline-item
            v-for="battle in filteredBattles"
            :key="battle.id"
            :timestamp="battle.date"
            :type="getBattleType(battle.result)"
            size="large"
            :hollow="true"
          >
            <el-card class="battle-card" @click="showBattleDetail(battle)">
              <template #header>
                <div class="battle-card-header">
                  <h3>{{ battle.name }}</h3>
                  <el-tag :type="battle.result === '胜利' ? 'success' : 'danger'">
                    {{ battle.result }}
                  </el-tag>
                </div>
              </template>
              <div class="battle-card-content">
                <div class="battle-info">
                  <p class="battle-desc">{{ battle.description }}</p>
                  <div class="battle-stats">
                    <span>
                      <el-icon><User /></el-icon>
                      指挥官：{{ battle.commander }}
                    </span>
                    <span>
                      <el-icon><Flag /></el-icon>
                      参战部队：{{ battle.forces }}
                    </span>
                  </div>
                </div>
                <div class="battle-image" v-if="battle.image">
                  <el-image 
                    :src="battle.image"
                    fit="cover"
                    :preview-src-list="[battle.image]"
                  />
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 地图视图 -->
      <div v-else class="map-view">
        <ChinaMap 
          :battles="filteredBattles"
          @battle-select="showBattleDetail"
        />
      </div>
    </div>

    <!-- 战役详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedBattle?.name"
      width="70%"
      destroy-on-close
    >
      <div class="battle-detail" v-if="selectedBattle">
        <el-tabs>
          <el-tab-pane label="战役概况">
            <div class="detail-overview">
              <div class="detail-header">
                <div class="detail-basic">
                  <h3>{{ selectedBattle.name }}</h3>
                  <div class="detail-tags">
                    <el-tag>{{ selectedBattle.date }}</el-tag>
                    <el-tag :type="selectedBattle.result === '胜利' ? 'success' : 'danger'">
                      {{ selectedBattle.result }}
                    </el-tag>
                  </div>
                  <p class="detail-desc">{{ selectedBattle.description }}</p>
                </div>
                <el-image
                  v-if="selectedBattle.image"
                  :src="selectedBattle.image"
                  fit="cover"
                  class="detail-image"
                />
              </div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="指挥官">
                  {{ selectedBattle.commander }}
                </el-descriptions-item>
                <el-descriptions-item label="参战部队">
                  {{ selectedBattle.forces }}
                </el-descriptions-item>
                <el-descriptions-item label="伤亡情况">
                  {{ selectedBattle.casualties }}
                </el-descriptions-item>
                <el-descriptions-item label="战役地点">
                  {{ selectedBattle.location }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="战役过程">
            <el-steps direction="vertical">
              <el-step 
                v-for="(phase, index) in selectedBattle.phases"
                :key="index"
                :title="phase.title"
                :description="phase.description"
              />
            </el-steps>
          </el-tab-pane>

          <el-tab-pane label="历史影响">
            <div class="detail-significance">
              <h4>战役意义</h4>
              <p>{{ selectedBattle.significance }}</p>
              <h4>历史教训</h4>
              <p>{{ selectedBattle.lessons }}</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Timer, Location, Search, User, Flag } from '@element-plus/icons-vue'
import { battles } from '@/modules/module3/module3-kangri/data'
import NavBar from '@/modules/module3/module3-kangri/components/NavBar.vue'
// 视图模式
const viewMode = ref('timeline')
const searchQuery = ref('')
const yearFilter = ref('')
const dialogVisible = ref(false)
const selectedBattle = ref(null)

// 战役数据

// 计算属性
const years = computed(() => {
  return [...new Set(battles.map(battle => battle.date.slice(0, 4)))]
})

const filteredBattles = computed(() => {
  return battles.filter(battle => {
    const matchQuery = battle.name.includes(searchQuery.value) ||
                      battle.description.includes(searchQuery.value)
    const matchYear = !yearFilter.value || battle.date.startsWith(yearFilter.value)
    return matchQuery && matchYear
  })
})

// 方法
const getBattleType = (result) => {
  return result === '胜利' ? 'success' : 'danger'
}

const showBattleDetail = (battle) => {
  selectedBattle.value = battle
  dialogVisible.value = true
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

#app4 {
  min-height: 100vh;
  width: 100%;
  min-height: 100vh;
  width: 100%;
  background-image: url('@/modules/module3/module3-kangri/assets/image/bg-global.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 使背景固定，不随滚动移动 */
}
.battles-container {
  padding: 20px;
}

.battles-header {
  margin-bottom: 30px;
}

.battles-content {
  margin-top: 20px;
}

.battle-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.battle-card:hover {
  transform: translateY(-5px);
}

.battle-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.battle-card-content {
  display: flex;
  gap: 20px;
}

.battle-info {
  flex: 1;
}

.battle-image {
  width: 400px;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.battle-stats {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  color: #666;
}

.detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.detail-basic {
  flex: 1;
}

.detail-image {
  width: 300px;
  height: 200px;
  border-radius: 8px;
}

.detail-tags {
  margin: 10px 0;
}

.detail-desc {
  color: #666;
  line-height: 1.6;
}

.gallery-image {
  width: 200px;
  height: 150px;
  margin: 10px;
  border-radius: 4px;
}

.detail-significance h4 {
  margin: 20px 0 10px;
}
</style>